<template>
  <li @click="changeCurrent(index)">
    <router-link :to="{path:'/gists/gist', query:{id:item.id}}">
      <span class="item-desc">{{item.description}} </span>
    </router-link>
    <span class="item-delete fr"
          @click="deleteCurrentGist(item.id)">
      <i class="el-icon-delete"></i></span>
  </li>
</template>

<script>
  import bus from "@/bus.js"
  import http from "axios"

  export default {
    name: "ListItem",
    props:["item","index"],
    data(){
        return {
          current:0,
          hideDeleteIcon:true
        }
    },
    mounted(){
        bus.$on("defaultTab",(id) => {
            console.log(id);
        });
    },
    methods:{
      changeCurrent(index){
        this.$emit("changeCurrent", index);
        bus.$emit("defaultSelected");
      //  显示右边Gist详情
      bus.$emit("showGistDetails");
      bus.$emit("showEditName");
      bus.$emit("showFileDetail");
      },
      deleteCurrentGist(id){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          http.delete("https://api.github.com/gists/"+ id,{
            headers: {
              "Authorization": "token " + localStorage.getItem("token")
            }
          })
            .then((r) => {
              console.log(r);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              bus.$emit("deletePageGist",id);
            })
            .catch();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }

    }
  }
</script>

<style>
  .item-desc{
    display: inline-block;
  }
  .item-delete{
    color: #888;
    font-size:12px;
    display: none;
  }
  .item-delete .el-icon-delete{
    position: absolute;
    top:50%;
    margin-top: -6px;
    right:20px;
  }
  .nav li:hover .item-delete,
  .nav li.active .item-delete{
    display: block;
  }
</style>
